<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background: aquamarine;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- <h1 v-if="flag">{{msg}}</h1>
      <h1 v-else>msg不显示就显示这个</h1>

      <h1 v-show="flag">{{msg}}</h1> -->

      <button @click="toggle">toggle</button>
      <div class="box" v-show="flag">{{msg}}</div>
      <!-- 点击切换显示隐藏 -->

      <hr />
      姓名： <input v-model="name" type="text" /> 年龄：<input
        type="text"
        v-model="age"
      />
      爱好：<input type="text" v-model="hobbit" />
      <button @click="add">add</button>
      <ul>
        <li v-for="(item,index) in list" @click="show(item.name)">
          姓名是：<span>{{item.name}}</span> 年龄是：<span>{{item.age}}</span>
          爱好是：<span>{{item.hobbit}}</span
          ><span @click.stop="remove(index)">x</span>
          <!-- .stop是vue中的阻止事件冒泡 阻止触发父元素的点击事件 -->
          <!-- {{item}} -->
        </li>
      </ul>
      <hr />
      <!-- 学生信息添加和删除 -->

      <!-- <ul>
        <li v-for="i in 10">{{i}}</li>
      </ul> -->
      <!-- 循环10个数字 -->

      <!-- v-model 双向数据绑定-->
      <input type="text" v-model="msg" />
      <h1 v-html="msg"></h1>
      <h1 v-text="msg"></h1>
    </div>
    <script src="vue-2.4.0.js"></script>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "<h3>这也太热了吧，该穿短袖了</h3>",
          flag: false,
          list: [
            { name: "小明", age: 18, hobbit: "打球" },
            { name: "小阳", age: 20, hobbit: "吃冰棍" },
            { name: "小猛", age: 35, hobbit: "杀崔猛" },
          ],
          name: "",
          age: "",
          hobbit: "看小说",
        },
        methods: {
          toggle() {
            this.flag = !this.flag;
          },
          //点击切换显示隐藏
          show(name) {
            alert(name);
          },
          //点击学生信息弹出学生姓名
          add() {
            this.list.push({
              name: this.name,
              age: this.age,
              hobbit: this.hobbit,
            });
            this.name = "";
            this.age = "";
            this.hobbit = "";
          },
          //点击add按钮添加一条学生信息
          remove(index) {
            this.list.splice(index, 1);
          },
          //删除一条学生信息
        },
      });

      //   vue指令
      // 4.v-if和v-show 控制元素显示隐藏 v-if控制节点的创建和删除 v-show 控制display none和display block
      // v-else 跟v-if搭配使用
      //   如果是来回切换的就用show 如果是只显示一次的就用if

      //   5.v-for 循环 可以循环数组也可以循环数字

      //   6.v-model  双向数据绑定 数据改不变视图也改变 视图改变数据也改变 这就叫双向的
      //   v-model 专门给表单元素用的 因为只有表单元素在浏览器里可以改变视图
    </script>
  </body>
</html>
